window.onload = function(){
    let navlist1 = document.getElementById('nav-list1');
    let navlist1body = document.getElementsByClassName('nav-list1-body');

    navlist1.onmouseover = function(){
        for(let i = 0; i < navlist1body.length; i++){
            navlist1body[i].style.display = 'block';
        }
    }

    navlist1.onmouseout = function(){
        for(let i = 0; i < navlist1body.length; i++){
            navlist1body[i].style.display = 'none';
        }
    }
	let navlist2 = document.getElementById('nav-list2');
	let navlist2body = document.getElementsByClassName('nav-list2-body');
	
	navlist2.onmouseover = function(){
	    for(let i = 0; i < navlist2body.length; i++){
	        navlist2body[i].style.display = 'block';
	    }
	}
	
	navlist2.onmouseout = function(){
	    for(let i = 0; i < navlist2body.length; i++){
	        navlist2body[i].style.display = 'none';
	    }
	}
	let navlist3 = document.getElementById('nav-list3');
	let navlist3body = document.getElementsByClassName('nav-list3-body');
	
	navlist3.onmouseover = function(){
	    for(let i = 0; i < navlist3body.length; i++){
	        navlist3body[i].style.display = 'block';
	    }
	}
	
	navlist3.onmouseout = function(){
	    for(let i = 0; i < navlist3body.length; i++){
	        navlist3body[i].style.display = 'none';
	    }
	}
	let navlist4 = document.getElementById('nav-list4');
	let navlist4body = document.getElementsByClassName('nav-list4-body');
	
	navlist4.onmouseover = function(){
	    for(let i = 0; i < navlist4body.length; i++){
	        navlist4body[i].style.display = 'block';
	    }
	}
	
	navlist4.onmouseout = function(){
	    for(let i = 0; i < navlist4body.length; i++){
	        navlist4body[i].style.display = 'none';
	    }
	}
	// 获取所有的元素
	var items = ["yingpianlist1item", "yingpianlist2item", "yingpianlist3item", "yingpianlist4item", "yingpianlist5item"];
	
	items.forEach(function(item) {
	    var element = document.getElementById(item);
	    var ulElement = element.getElementsByTagName('ul')[0];
	
	    // 当鼠标移动到元素上时
	    element.parentElement.onmouseover = function() {
	        element.style.transition = "opacity 0.5s";
	        element.style.opacity = "0.8";
	        ulElement.style.transition = "opacity 0.5s";
	        ulElement.style.opacity = "1";
	    };
	
	    // 当鼠标移出元素时
	    element.parentElement.onmouseout = function() {
	        element.style.transition = "opacity 0.5s";
	        element.style.opacity = "0";
	        ulElement.style.transition = "opacity 0.5s";
	        ulElement.style.opacity = "0";
	    };
	});

}
